<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
    <script src="/static/JQuery/jquery-3.3.1.min.js"></script>
    <script src="/static/myJS/custom.js"></script>
</head>
<body class="layui-layout-body" style="padding: 10px">
<form class="layui-form">
    <div class="layui-inline">
        搜索：
        <div class="layui-inline">
            <select class="layui-input layui-select" name="fkstateid" id="fkstateid" lay-search="">
            </select>
        </div>
        <button class="layui-btn" type="button" id="search" data-type="reload">搜索</button>
        <!--<button class="layui-btn" type="button" id="insert" data-type="insert">添加</button>-->
    </div>
</form>

<table id="table" lay-filter="tableFilter"></table>

<script type="text/html" id="operationBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">确认收货</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">取消订单</a>
</script>

<hr>
<div class="layui-collapse" id="orderList" lay-filter="filter" lay-accordion=""></div>

</body>

</html>

<script>

    //JavaScript代码区域
    layui.use(['element','table','laydate','layer','form','laytpl'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var $ = layui.$;


        table.render({
            id:"orderTable"
            ,elem: '#table'
            ,toolbar: '#toolbar'
            ,url:"/restful/find"
            ,page: true //开启分页
            ,method:"POST"
            ,contentType: 'application/json'
            ,where:{
                firstTable: 'orders',
                relations:{
                    "orders.fkstateid": "states.stateid",
                    "orders.fkaddressid": "addresses.addressid"
                },
                wheres:[
                    {field:"orders.fkbuyerid", value: getLoginUserid()}
                ]
            }
            ,cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [
                [ //表头
                    {field: 'orderid', title: 'ID', hide: true}
                    ,{field: 'statename', title: '订单状态', width:150,sort: true, fixed: 'left'}
                    ,{field: 'orderprice', title: '订单总价',sort: true}
                    ,{field: 'ordertime', title: '下单时间', width:200,sort: true}
                    ,{field: 'contactphone', title: '联系电话', width:200,sort: true}
                    ,{field: 'addressdesc', title: '收货地址', width:300, sort: true}
                    ,{fixed: 'right', title:'操作', width:200, toolbar: '#operationBar'}
                ]
            ]
            ,done : function () {
                initState(form);
                showOrderDetail(laytpl,element);
            }
        });

        //监听行工具事件
        table.on('tool(tableFilter)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                /**/
            } else if(obj.event === 'del'){

                layer.confirm('确定要取消该订单吗', function(index){
                    $.ajax({
                        url:"/order/stateCancel/" + data.orderid,
                        type:"GET",
                        dataType : "json",
                        async : false,
                        success : function(result) {
                            if(result.code === 0){
                                layer.msg("取消成功", {icon:1});
                            }else{
                                layer.msg(result.msg, {icon:5});
                            }
                        },
                        error:function(result){
                            layer.msg(result.msg, {icon:5});
                        }
                    });
                    table.reload("orderTable");
                    showOrderDetail(laytpl,element);
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.confirm('确定完成该订单吗', function(index){
                    $.ajax({
                        url:"/order/stateFinish/" + data.orderid,
                        type:"GET",
                        dataType : "json",
                        async : false,
                        success : function(result) {
                            if(result.code === 0){
                                layer.msg("操作成功", {icon:1});
                            }else{
                                layer.msg(result.msg, {icon:5});
                            }
                        },
                        error:function(result){
                            layer.msg(result.msg, {icon:5});
                        }
                    });
                    showOrderDetail(laytpl,element);
                    table.reload("orderTable");
                    layer.close(index);
                });
            }
        });

        var active = {
            reload: function(){
                var fkstateid = $("#fkstateid option:selected").val();
                table.reload('orderTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        wheres: [
                            {field:"orders.fkbuyerid", value: getLoginUserid()},
                            {field:"orders.fkstateid", value: fkstateid}
                        ]
                    }
                });
                showOrderDetail(laytpl,element);
            }
        };

        $('#search').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


    });


    function showOrderDetail(laytpl,element) {
        var fkstateid = $("#fkstateid option:selected").val();

        $.ajax({
            url:"/order/find",
            type:"POST",
            data:JSON.stringify({
                firstTable: 'orders',
                relations:{
                    "orders.fkstateid": "states.stateid",
                    "orders.fkaddressid": "addresses.addressid"
                },
                wheres:[
                    {field:"orders.fkbuyerid", value: getLoginUserid()},
                    {field:"orders.fkstateid", value: fkstateid}
                ]
            }),
            contentType: "application/json;charset=utf-8",
            dataType : "json",
            async : false,
            success : function(result) {
                //第三步：渲染模版
                var getTpl = $('#demo').html()
                    ,view = $('#orderList');
                laytpl(getTpl).render(result.data, function (html) {
                    view.html(html);
                });
                element.render('collapse');
                // layer.msg("加载成功", {icon:1});
            },
            error:function(result){
                layer.msg(result.msg, {icon:5});
            }
        });
    }

</script>

<!--第一步：编写模版。你可以使用一个script标签存放模板，如：-->
<script id="demo" type="text/html">
    <div class="layui-colla-item">
        {{#  if(d.orderList.length === 0){ }}
            <h2 class="layui-colla-title">无数据</h2>
        {{#  }else{ }}
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">
                    <label class="layui-col-md1">订单状态</label>
                    <label class="layui-col-md1">订单总价</label>
                    <label class="layui-col-md2">下单时间</label>
                    <label class="layui-col-md2">联系电话</label>
                    <label class="layui-col-md5">配送地址</label>
                </h2>
            </div>
            {{#  layui.each(d.orderList, function(index, orderItem){ }}
                <div class="layui-colla-item">
                    <!--<h2 class="layui-colla-title">{{ orderItem.ordertime }}</h2>-->
                    <h2 class="layui-colla-title">
                        <label class="layui-col-md1">{{ orderItem.statename }}</label>
                        <label class="layui-col-md1" style="color: #FF0000">￥{{ orderItem.orderprice }}</label>
                        <label class="layui-col-md2">{{ orderItem.ordertime }}</label>
                        <label class="layui-col-md2">{{ orderItem.contactphone }}</label>
                        <label class="layui-col-md5">{{ orderItem.addressdesc }}</label>
                    </h2>
                    <div class="layui-colla-content">
                    {{#  if(orderItem.goodsList.length === 0){ }}
                        暂无数据
                    {{#  }else{ }}
                        <table class="layui-table">
                            <thead>
                                <tr>
                                    <td>商品名称</td>
                                    <td>商品单价</td>
                                    <td>商品单位</td>
                                    <td>购买数量</td>
                                    <td>金额小计</td>
                                    <td>评分</td>
                                    <td>评价</td>
                                </tr>
                            </thead>
                            <tbody>
                            {{#  layui.each(orderItem.goodsList, function(index, goodsItem){ }}
                                <tr>
                                    <td>{{ goodsItem.goodsname }}</td>
                                    <td>{{ goodsItem.goodsprice }}</td>
                                    <td>{{ goodsItem.goodsunit }}</td>
                                    <td>{{ goodsItem.recordnum }}</td>
                                    <td>￥{{ goodsItem.recordprice }}</td>
                                    <td>
                                        {{#  if(goodsItem.goodsstar){ }}
                                            {{ goodsItem.goodsstar }}
                                        {{#  }else{ }}
                                            暂无评分
                                        {{#  } }}
                                    </td>
                                    <td>
                                        {{#  if(goodsItem.goodsstar){ }}
                                        {{ goodsItem.goodsstar }}
                                        {{#  }else{ }}
                                        暂无评价
                                        {{#  } }}
                                    </td>
                                </tr>
                            {{#  }); }}
                            </tbody>
                        </table>
                    {{#  } }}
                    </div>
                </div>
            {{#  }); }}
        {{#  } }}
    </div>
</script>

